<template>
  <div class="login">

    <div class="header">
      <div class="logo"><img src="../../assets/login/logo.png" alt=""></div>
      <div class="title">星猫充电管理系统</div>
    </div>
    <div class="login-input">
      <div style="max-width: 294px;">
        <div class="login-input-row">
          <img src="../../assets/login/phone.png" alt="">
          <input type="number" v-model="form.username" placeholder="手机号">
        </div>
        <div class="login-input-row">
          <img src="../../assets/login/key.png" style="width:15px">
          <input type="password" v-model="form.password" placeholder="密码">
        </div>
      </div>
    </div>
    <div class="login-btn" @click="login">登录</div>
  </div>
</template>

<script>
  import { LoginMethod } from '@/utils/request.js'

  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        }
      }
    },
    mounted() {
      document.title = "登录"
    },
    methods: {
      login() {
        if (!this.form.username) {
          return this.$toast.text('请输入手机号', {
            bgColor: 'rgba(50, 50, 50, 0.9)'
          });
        }
        if (!this.form.password) {
          return this.$toast.text('请输入密码', {
            bgColor: 'rgba(50, 50, 50, 0.9)'
          });
        }

        LoginMethod(this.form).then((res) => {
          if (res.code == 200) {
            this.$toast.success(res.msg)
            localStorage.setItem('login', JSON.stringify(res.data))
            setTimeout(() => {
              this.$router.push({path: '/'})
            }, 1500)
          } else {
            this.$toast.fail(res.msg)
          }
        })
      }
    }
  };
</script>

<style lang="less" scoped>
  .login {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: url(../../assets/login/login_bg2.png);
    -webkit-background-size: cover;
    background-size: cover;
    color: #fff;

    .header {
      text-align: center;
      padding-top: 70px;
      .logo {
        text-align: center;
        width: 100%;
        // height: @logo-height;
        img {
          width: 71px;
          height: 75px;
        }
      }

      .title {
        padding-top: 7px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    .login-input {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      padding-top: 70px;
      // padding: 70px 20px 0;
    }

    .login-input-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 295px;
      border-bottom: 1px solid #AED1FE;
      margin-bottom: 24px;

      img {
        width: 13px;
      }

      input {
        width: 100%;
        height: 33px;
        background-color: transparent;
        border: 0;
        color: #fff;
        padding-left: 10px;
        box-sizing: border-box;
        outline: none;
      }

      ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #fff;
        font-size: 15px;
      }

      ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #fff;
        font-size: 15px;
      }

      :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #fff;
        font-size: 15px;
      }
    }

    .login-btn {
      max-width: 294px;
      height: 44px;
      border-radius: 25px;
      background-color: #fff;
      color: #1677FF;
      font-size: 16px;
      text-align: center;
      line-height: 44px;
      font-weight: bold;
      letter-spacing: 20px;
      margin: 22px auto 0 auto;
    }
  }
</style>
